Image Methods Gallery

Four ways to put an image in HTML

Each frame is its own page. Hover a frame to scroll it, click it to zoom in.

80 px/s
Hover to scroll · leave to rewind
method-1 / folder-reference
Method 01

Keep it in a folder

The image is a normal file. The page points to it by name.

logo.png

The code

<img src="images/logo.png">

At a glance

One fileNo
OfflineYes
SizeSmall

Good and bad

  • HTML stays light; swap the image without touching code
  • How almost every website works
  • Email only the HTML and the image breaks
Best for
Websites with many images
method-2 / embedded-base64
Method 02

Embed it as code

The image becomes text and lives inside the page itself.

iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9

The code

<img src="data:image/png;base64,iVBORw0KGgo...">

At a glance

One fileYes
OfflineYes
Size+33%

Good and bad

  • Pixel-perfect copy of the original file
  • Survives email, downloads and offline use
  • Heavy for photos or many images
Best for
Reports and pages shared as one file
method-3 / image-url
Method 03

Link to a URL

The image is hosted online. The page loads it from that address.

https://site.com/logo.png

The code

<img src="https://yourwebsite.com/logo.png">

At a glance

One fileYes
OfflineNo
SizeTiny

Good and bad

  • One hosted image serves many pages
  • Breaks if the link moves or is deleted
  • Drive share links open a viewer, not the image
Best for
Images already hosted online
method-4 / inline-svg
Method 04

Inline SVG

Drawing instructions instead of pixels. Sharp at any size.

The code

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1E2761"/>
</svg>

At a glance

One fileYes
OfflineYes
SizeTiny

Good and bad

  • Razor sharp on any screen or zoom
  • Colours can be changed with code
  • Only for logos, icons and simple graphics
Best for
Logos and icons